<template>
  <div class="list_con">
    <el-tabs>
      <el-tab-pane label="模板市场">
        <div class="list">
          <el-card class="item_div" :body-style="'padding:0'" shadow="hover">
            <div class="item">
              <div class="temp-detail"><span>空白页面</span></div>
              <div class="temp-action">
                <div class="temp-action-btn primary"><el-button type="primary" @click="addPage(pagetype)">使用模板</el-button></div>
              </div>
              <img src="@/assets/images/ipbg.png" />
            </div>
          </el-card>
          <el-card class="item_div" :body-style="'padding:0'" v-for="(item, i) in list" :key="i" shadow="hover">
            <div class="item">
              <div class="temp-detail">
                <span>{{ item.page_name }}</span>
              </div>
              <div class="temp-action">
                <div class="temp-action-btn primary"><el-button type="primary" @click="addPage(item, 1)">使用模板</el-button></div>
              </div>
              <vimage :src="item.small_img"></vimage>
            </div>
          </el-card>
        </div>

        <div class="table_footer" style="justify-content: flex-end;">
          <el-pagination :page-size="12" @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的模板">
        <div class="list">
          <el-card class="item_div" :body-style="'padding:0'" shadow="hover">
            <div class="item">
              <div class="temp-detail"><span>空白页面</span></div>
              <div class="temp-action">
                <div class="temp-action-btn primary"><el-button type="primary" @click="addPage(pagetype)">使用模板</el-button></div>
              </div>
              <vimage src="@/assets/images/ipbg.png"></vimage>
            </div>
          </el-card>
          <el-card class="item_div" :body-style="'padding:0'" v-for="(item, i) in templist" :key="i" shadow="hover">
            <div class="item">
              <div class="temp-detail">
                <span>{{ item.page_name }}</span>
              </div>
              <div class="temp-action">
                <div class="temp-action-btn primary"><el-button type="primary" @click="addPage(item, 2)">使用模板</el-button></div>
              </div>
              <img :src="item.small_img" />
            </div>
          </el-card>
        </div>

        <div class="table_footer" style="justify-content: flex-end;">
          <el-pagination :page-size="12" @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {marketList, delMytemplate, myTemplateList} from '@/api/mall/dndlist';
export default {
  props: {
    pagetype: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      templist: [],
      list: [],
      page: 1,
      size: 10,
      total: 0
    };
  },
  watch: {
    pagetype() {
      // console.log(this.pagetype)
      // this.getMyTemplateList();
      // this.getlist();
    }
  },
  created() {
    // this.getMyTemplateList();
    // this.getlist();
  },
  methods: {
    getMyTemplateList() {
      let data = {};

      let type = this.pagetype == '4' ? 0 : this.pagetype;
      console.log(this.pagetype)
      myTemplateList(data, this.page, 12, type).then(res => {
        let o = res.msg;
        this.templist = o.data;
        this.total = o.total;
      });
    },
    addPage(item, type) {
      if (typeof item == 'object') {
        this.$router.push({
          path: '/dndlist',
          query: {
            page_type: item.page_type,
            type: item.page_type,
            id: item.id,
            temp: type
          }
        });
      } else {
        this.$router.push({
          path: '/dndlist',
          query: {
            type: item
          }
        });
      }
      this.drawer = false;
    },
    getlist() {
      var data = {};
      let type = this.pagetype == '4' ? 0 : this.pagetype;
      marketList(data, 1, 12, type).then(res => {
        let o = res.msg;
        this.list = o.data;
        this.mktotal = o.total;
      });
    },
    changePage(page) {
      this.page = page;
      this.myTemplateList();
    }
  }
};
</script>

<style lang="scss" scoped>
.mall_template {
  .el-card {
    border: none !important;
  }
}
.list_con {
  margin-top: 0;
}
/deep/ .el-dialog__body {
  padding-top: 0;
}
</style>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  // padding: 20px;
  .item_div {
    margin: 20px;
    border: none;
  }
  .item {
    display: flex;
    width: 225px;
    cursor: pointer;
    flex-direction: column;
    position: relative;
    padding: 0;
    &:hover {
      .temp-action {
        display: flex;
      }
      .temp-detail {
        display: block;
      }
    }
    .temp-detail {
      font-weight: bold;
      padding: 20px;
      display: none;
      position: absolute;
      top: 0;
      z-index: 5;
      color: #ffffff;
      text-align: center;
      width: 100%;
    }
    .temp-action {
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.7);
      display: none;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
      width: 223px;
      height: 400px;
      border-radius: 4px 4px 0 0;
      .temp-action-btn {
        border-radius: 2px;
        height: 32px;
        width: 100%;
        font-size: 14px;
        // font-weight: bold;
        line-height: 32px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        i {
          font-size: 32px;
        }
      }
    }
    img {
      width: 225px;
      height: 400px;
    }
  }
}
.show_page {
  display: flex;
  .show_item {
    display: flex;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    box-shadow: 0px 1px 4px rgba(133, 148, 162, 0.2);
    flex-wrap: nowrap;
    padding: 10px 0 10px 10px;
    img {
      width: 112px;
    }
    .show_content {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
